import React from "react"
import { View } from "@tarojs/components"
import clsx from "clsx"
import styles from "./index.module.scss"

type IProps = {
  className?: string
  pagination: IPagination
  onChange: (page: number) => any
}
/** 分液器  */
const GpPagination: React.FC<IProps> = (props: IProps) => {
  const { className, pagination } = props
  function handlePrev() {
    if (pagination.page === 1) return
    props.onChange(pagination.page - 1)
  }
  function handleNext() {
    if (pagination.page === pagination.pageCount) return
    props.onChange(pagination.page + 1)
  }
  if (pagination.pageCount <= 1) return null
  return (
    <View className={clsx(styles["pagination"], className)}>
      <View
        className={clsx("mr-110px", styles["text"], {
          [styles["disable"]]: pagination.page === 1
        })}
        onClick={handlePrev}
      >
        上一页
      </View>
      <View className={styles["text"]}>
        {pagination.page}/{pagination.pageCount}
      </View>
      <View
        className={clsx("ml-110px", styles["text"], {
          [styles["disable"]]: pagination.page === pagination.pageCount
        })}
        onClick={handleNext}
      >
        下一页
      </View>
    </View>
  )
}
export default GpPagination
